<!DOCTYPE html>
<html>
    <head>
        <style>
            .pager { 
                font-family: monospace;
                font-size: 14px;
                text-align: center;
                user-select: none;
            }
            .pager ul {
                margin: 0.5em 0.5em;
                padding: 0px; 
                height: 2em;
                display: inline-block;
                list-style: none;
            }
            .pager ul li {
                min-width: 1em;
                margin: 0 0.15em;
                padding: 0 0.5em;
                float: left;
                line-height: 2em;
                text-align: center;
                box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
                cursor: pointer;
            }
            .pager ul li:hover {
                color: red;
            }
            .pager .curr {
                padding: 0 1em;
                color: rgba(0,0,0,0.6);
                background-color: rgba(0,0,0,0.2);
                cursor: default;
            }
            .pager .curr:hover {
                color: rgba(0,0,0,0.6);
            }
        </style>
    </head>
    <body>
        <div class="pager" data-init="true" data-type="pager">
            <ul>
                <li data-href="#<"><</li>
                <li data-href="#1">1</li>
                <li data-href="#2">2</li>
                <li class="curr">3/500</li>
                <li data-href="#4">4</li>
                <li data-href="#5">5</li>
                <li data-href="#>">></li>
            </ul>
        </div>
    </body>
    <script src="jquery-2.2.0.min.js"></script>
    <script>
        $(function() {
            $('[data-init=true]').each(function(i, e) {
                var e = $(e);
                if(e.data('type') === 'pager') {
                    e.find('li').click(function() {
                        var e = $(this);
                        if(e.data('href')) {
                           window.location.href = e.data('href'); 
                        }
                    });
                }
                e.data('init', false);
            });
        });
    </script>
<html>